<template>
  <view
    class="goods_detail"
    v-if="goodsInfo"
  >
    <!-- 轮播图 -->
    <swiper
      class="goods_swiper"
      indicator-dots
      autoplay
      circular
    >
      <swiper-item
        v-for="(item,index) in  goodsInfo.pics"
        :key="index"
      >
        <image
          mode="widthFix"
          :src="item.pics_big"
          @tap="imagePreview(index)"
        />
      </swiper-item>
    </swiper>
    <!-- 价格 -->
    <view class="goods_price_wrap">￥{{goodsInfo.goods_price}}</view>
    <!-- 名称 -->
    <view class="goods_name_wrap">
      <view class="goods_name_1">{{goodsInfo.goods_name}}</view>
      <view class="goods_name_2">
        <view> <text class="iconfont icon-shoucang"></text> </view>
        <view>收藏</view>
      </view>
    </view>
    <!-- 图文详情 -->
    <view class="details">
      <view class="details_title">图文详情</view>
      <view class="details_content">
        <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
      </view>

    </view>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        open-type="contact"
      />
      <van-goods-action-icon
        icon="share-o"
        text="分享"
        open-type="share"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        url="/pages/cart/cart"
        link-type="switchTab"
      />
      <van-goods-action-button
        text="加入购物车"
        type="warning"
        @click="onAddCart"
      />
      <van-goods-action-button text="立即购买" />
    </van-goods-action>
  </view>
</template>

<script>
/* 
1 页面的数据渲染 
2 点击轮播图 放大预览 
  1 给图片绑定点击事件
  2 调用一个微信小程序api 来实现图片放大预览 
3 引入商品导航组件 goodsaction
4 实现客服功能
5 点击加入购物车功能
  1 也是要调用后台的接口来 
  2 自己来通过本地存储来管理 商品数据
    更加考验我们对数据的处理能力
      把本地存储看成了小表格 数据库一样 
  3 绑定点击事件
    1 把当前的商品添加到缓存中 如何去设计 缓存的数据的格式 
      cartList:[
        {
          商品对象的一堆信息-后台直接返回!! 
          购买的数量:前端用户自己决定,
          选中属性
        }
        ,{}]
  4 事件触发后的业务
    1 获取缓存中的购物车数组 "" =>[]
    2 判断 当前的商品是否已经存在购物车数组中
    3 没有存在
      cartList push 当前的商品对象即可  自己加入两个属性 购买的数量=1 选中状态=true
    4 已经存在过
      获取到 商品对象 存在cartList[index]  =>购买数量++
    5 数组 设置回缓存中即可  
 */

export default {
  data() {
    return {
      goodsInfo: null,
    };
  },
  async onLoad({ goods_id }) {
    this.goodsInfo = await this.get({
      url: "/goods/detail",
      data: { goods_id },
    });
  },
  methods: {
    // 点击轮播图的图片
    imagePreview(index) {
      // 要放大预览的图片路径
      const urls = this.goodsInfo.pics.map((v) => v.pics_big);
      // 当前要显示的图片路径
      uni.previewImage({
        current: urls[index],
        urls,
      });
    },
    // 点击加入购物车
    onAddCart() {
      //  1 获取购物车数组
      const cartList = uni.getStorageSync("cartList") || [];
      // 2 判断当前的商品是否已经存在于数组中
      const index = cartList.findIndex(
        (goods) => goods.goods_id === this.goodsInfo.goods_id
      );
      if (index === -1) {
        // 没有找到 添加新的商品进去
        cartList.push({ ...this.goodsInfo, count: 1, checked: true });
      } else {
        // 在以前已经添加过了
        cartList[index].count++;
      }

      uni.setStorageSync("cartList", cartList);
      uni.showToast({ title: "添加成功" });
    },
  },
};
</script>

<style lang="less" >
.goods_detail {
  padding-bottom: 50px;
}
.goods_swiper {
  height: 90vw;
  image {
    width: 80%;
    margin: 0 auto;
  }
}
.goods_price_wrap {
  padding: 20rpx;
  font-weight: 600;
  font-size: 30rpx;
  color: #ff2d4a;
}

.goods_name_wrap {
  display: flex;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;

  .goods_name_1 {
    padding-right: 20rpx;
    flex: 1;
    border-right: 1rpx solid #000;
  }

  .goods_name_2 {
    padding: 0 20rpx;
    text-align: center;
  }
}
.details_title {
  padding: 20rpx;
  font-size: 32rpx;
  color: #ff2d4a;
  font-weight: 600;
}
</style>